<template>
  <div class="register">
    <section class="form_container">
      <div class="manage_tip">
        <span class="title">校园点餐管理平台</span>
      </div>

      <el-form
        :model="registerUser"
        :rules="rules"
        class="registerForm"
        ref="registerForm"
        label-width="80px"
      >
        <el-row>
          <el-col>
            <el-form-item label="身份证号" prop="number">
              <el-input
                v-model="registerUser.number"
                placeholder="请输入身份证号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="registerUser.name"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col>
            <el-form-item label="电话" prop="telephone">
              <el-input
                v-model="registerUser.telephone"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="registerUser.password"
                placeholder="请输入密码"
                type="password"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="角色" prop="role">
              <el-select v-model="registerUser.role" 
              style="width:100%"
              placeholder="请选择角色">
                <el-option label="学生" value="student"></el-option>
                <el-option label="老师" value="invest"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button
            type="primary"
           
            class="submit_btn"
            @click="submitForm('registerForm')"
            >注&nbsp&nbsp册</el-button
          >
        </el-form-item>

        <div class="tiparea">
          <p>
            已有账号？点击
            <router-link to="/login">登录</router-link>
          </p>
        </div>
      </el-form>
    </section>
  </div>
</template>

<script>
export default {
  name: "register",
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value !== this.registerUser.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      registerUser: {
        name: "",
        number: "",
        telephone: "",
        password: "",
        role: ""
      },
      rules: {
        name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        number: [
          { required: true, message: "身份证号码不能为空", trigger: "blur" },
          {
            validator: function(rule, value, callback) {
              if (
                /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
                  value
                ) == false
              ) {
                callback(new Error("请输入正确的身份证号"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        telephone: [
          { required: true, message: "电话不能为空", trigger: "blur" },
          {
            validator: function(rule, value, callback) {
              if (/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 6, max: 30, message: "长度在 6 到 30 个字符", trigger: "blur" }
        ],
        role: [{ required: true, message: "请输入角色", trigger: "change" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        // console.log(this.registerUser, "注册信息cnm");
        let iden = this.registerUser.number;
        let sex = null;
        let birth = null;
        let myDate = new Date();
        let month = myDate.getMonth() + 1;
        let day = myDate.getDate();
        let age = 0;

        age = myDate.getFullYear() - iden.substring(6, 10) - 1;
        sex = iden.substring(16, 17);
        birth =
          iden.substring(6, 10) +
          "-" +
          iden.substring(10, 12) +
          "-" +
          iden.substring(12, 14);
        if (
          iden.substring(10, 12) < month ||
          (iden.substring(10, 12) == month && iden.substring(12, 14) <= day)
        ) {
          age++;
        }
        if (sex % 2 === 0) {
          sex = "女";
        } else {
          sex = "男";
        }
        this.registerUser.age = age;
        this.registerUser.sex = sex;
        if (valid) {
          this.$api.post("/api/users/register", this.registerUser).then(res => {
            // 注册成功
            this.$message({
              message: "注册成功",
              type: "success"
            });
            this.$router.push("/login");
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.register {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url(../../assets/bg.jpg) no-repeat center center;
  overflow: hidden;
  background-size: 100% 100%;
}
.form_container {
  width: 450px;
  height: 500px;
  background-color: rgba(255,255,255,.6);
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}
.form_container .manage_tip .title {
  font-family: "Microsoft YaHei";
  font-weight: bold;
  font-size: 26px;
  color: #000;
}
.registerForm {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px 40px 20px 20px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px #cccc;
}

.submit_btn {
  width: 100%;
}
.tiparea {
  text-align: right;
  font-size: 12px;
  color: #333;
}
.tiparea p a {
  color: #409eff;
}
</style>
